<template>
  <div class="input-box">
    <div class="input-con">
      <el-input v-model="replyForm.replyContent" autosize type="textarea" placeholder="请发表你的意见" />
      <div class="q-right"><el-button type="primary" plain @click="addReplyComment()">发送</el-button></div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, watch } from 'vue'
import { replyComment } from '@/api/article'

const props = defineProps({
  modelValue: {}
})

const emit = defineEmits(['update'])

const replyForm = reactive(props.modelValue)

async function addReplyComment() {
  try {
    const res = await replyComment(replyForm)
    emit('update', replyForm.commentId)
    ElMessage.success(res)
  } finally {
    for (let key in replyForm) {
      replyForm[key] = '';
    }
  }

}
</script>

<style scoped>
.input-box {
  position: relative;
  width: 400px;
}

.input-con {
  display: flex;
  flex-direction: column;

  .el-button {
    margin-top: 10px;
  }
}

.input-comment {
  border: none;
  outline: none;
  resize: none;
  height: auto;
}
</style>